<template>
    <div>
        <div class="table_top">
            <!-- 车站首字母 -->
            <div class="letter">
                <h4>车站首字母</h4>
                <select>
                    <option value="all">全部</option>
                    <option value=1>ID</option>
                    <option value=2>车站</option>
                </select>
            </div>
            <!-- 新增搜索车站 -->
            <div class="search">
                <span>
                    <input v-model="flag" type="checkbox" @click="start">启用
                </span>
                <span>
                    <input type="text" placeholder="请输入ID/车站" @change="search">
                </span>
                <el-button type="primary" :icon="Plus" @click="comfin">新增按钮</el-button>
            </div>
        </div>
        <div class="table_box">
            <el-table :data="store.screenList.length>0 ? store.screenList : store.arrList" :option="option" style="width: 100%">
                <el-table-column prop="id" label="ID" width="319"></el-table-column>
                <el-table-column prop="city" label="车站" width="319">

                </el-table-column>
                <el-table-column class-name="operation" prop="status" label="状态" width="319" >
                    <template #default="scope">
                        <div class="switch" @click="add(scope)">
                            <img :src="scope.row.status == 1 ? qi : ting"><span
                                :class="[scope.row.status == 1 ? 'on' : '']">{{ scope.row.status == 1 ? '启用' : '停用' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column class-name="operation" label="操作" align="center">
                    <template #default="scope">
                    <img src="../img/编辑.png" @click="handleEdit(scope.$index, scope.row)">
                    <img src="../img/Del.png" @click="handleDelete(scope.$index, scope.row)">
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="store.arrList.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
        <!-- 弹框 -->
        <el-dialog
    v-model="dialogVisible"
    :title="type=== 'add' ? '新增车站' : '编辑车站'"
    width="30%"
    :before-close="handleClose"
  >
    <template #footer>
        <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="id" prop="id">
      <el-input v-model="ruleForm.id"  autocomplete="off" />
    </el-form-item>
    <el-form-item label="车站" prop="city">
      <el-input
        v-model="ruleForm.city"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-input v-model="ruleForm.status" />
    </el-form-item>
    <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">返回</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef,ruleForm)"
        >提交</el-button
      >
    
    </el-form-item>
  </el-form>
    </template>
  </el-dialog>
    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useStore } from '../stores/counter'
import { onMounted, toRefs, ref ,reactive } from 'vue'
import qi from '../img/启用.png'
import ting from '../img/停用.png'
const store = useStore()


onMounted(() => {
    store.StatList()
})
const option = ref({
    column: [
        {
            label: 'ID',
            prop: 'id',
            // search: true,
        },
        {
            label: '车次/类型',
            prop: 'city',
            // search: true,
        },
        {
            label: '车长',
            prop: 'status',
            //    search: true,
        },
    ]
})

//点击状态
const add = (scope) => {
    if (scope.row.status == 0) {
        scope.row.status = 1
    } else {
        scope.row.status = 0
    }
}

const type = ref(['add','edit'])


const dialogVisible = ref(false)

//分页
const currentPage3 = ref(1)
const pageSize3 = ref(5)
const handleSizeChange = (val) => {
  console.log(val)
}
const handleCurrentChange = (val) => {
    store.PageSize(val)
    // console.log(store.arr);
}

//弹框
const handleClose = (done) => {
    console.log(done);
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

//新增表单
const ruleFormRef = ref()


const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入车站'))
  }  else {
    callback()
  }
}

let ruleForm = reactive({
  id: '',
  city: '',
  status: '',
})

const rules = reactive({
  city: [{ validator: validatePass, trigger: 'blur' }],
})

//弹框确定
const submitForm = (ruleFormRef,formEl) => {
  // console.log(formEl);
 
    store.StatAdd(formEl)
    dialogVisible.value = false
    ruleFormRef.resetFields()
}

//关闭弹框

const resetForm = (formEl) => {
  if (!formEl) return
   if(type.value = 'add'){
    formEl.resetFields()
    ruleForm = ('')
   }else{
     
   }
   dialogVisible.value = false
}

//新增
const comfin = ()=>{
  dialogVisible.value = true
  type.value = 'add'
}

//搜索
const search=(e)=>{
 
  store.StatSearch(e.target.value)
}

const flag = ref(false)
//停用启用
const start=()=>{
  // console.log(!flag.value);
  store.Start(!flag.value)
}

//编辑
const handleEdit = (index, row) => {
    console.log(index, row)
    ruleForm = row
    store.EDITITEM(row)
    type.value = 'edit'
    dialogVisible.value = true
}

//删除
const handleDelete = (index, row) => {
    // console.log(index, row)
    store.DELETEITEM(index,row)
}
</script>

<style scoped lang="scss"> 
.table_top {
    display: flex;
    justify-content: space-between;

    .search {
       
        width: 400px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        span:nth-child(1) input {
            width: 14px;
            height: 14px;
            border: solid 1px #b2b7c6;
            margin-right: 5px;
        }

        span:nth-child(2) input {
            width: 125px;
            height: 26px;
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #b2b7c6;
            padding: 5px;
        }
    }

    .el-button {
        width: 109px;
        height: 36px;
        background-color: #1ba9ba;
        border-radius: 2px;
    }
}

.operation img {
    width: 17px;
    height: 17px;
    margin: 10px;
}

.letter {
    width: 200px;
    height: 50px;
    align-items: center;
    display: flex;
    justify-content: space-around;

    select {
        width: 90px;
        height: 36px;
        border-radius: 4px;
        text-align: center;
        color: #80879b;
        border: solid 1px rgba(178, 183, 198, 0.54);

        option {
            border: solid 1px rgba(178, 183, 198, 0.54);
        }
    }
}

.switch {
    width: 120px;
    height: 60px;
    display: flex;
    align-items: center;
    margin-left: -20px;
}

.switch img {
    width: 29px;
    height: 16px;
}

.switch span {
    margin-left: 2px;
}

.on {
    color: #1ba9ba;
}
</style>